﻿@model Lead2012.ViewModels.LeadImportViewModel

<fieldset id="ImportLeadHelp" data-bind="visible:DisplayHelp">
    <div class="content">
        <h2 class="app">
            <strong>Nhập các khách hàng</strong>
        </h2>
        <nav id="steps" class="steps steps-wide steps-blue">
                  <ul>
                    <li class="first done" style="z-index: 3;"><a href="javascript:void(0)"><span>Bước 1: Chọn tài liệu</span></a></li>
                    <li class="active" style="z-index: 2;"><a href="javascript:void(0)"><span>Bước 2: Map các tên cột</span></a></li>
                    <li class="last" style="z-index: 1;"><a href="javascript:void(0)"><span>Bước 3: Xem và nhập khách hàng</span></a></li>
                  </ul>
                </nav>
        <div class="title nomargin">
            <h3>Bước 2: Map các tên cột</h3>
        </div>
        <div class="panel">
            <p><strong>Chúng tôi có thử map tên cột trong tài liệu của bạn đến các tên cột chuẩn của chúng tôi.</strong></p>
            <ul class="circle-number">
                <li><span class="n">1</span>
                    Kiểm tra tên tiêu đề để chắc rằng chúng là chính xác.
                    Bạn có thể loại bỏ các các cột từ tài liệu của bạn bởi việc chọn biểu tượng xóa.
                </li>
                <li><span class="n">2</span>
                    Trong một vài trường hợp chúng tôi không tự động map các cột, như vậy xin hãy tìm tên các 
                    cột bên phải để map lại với tên của bạn bên trái.
                </li>
            </ul>
            <div class="title nomargin">
                <h3>Map tên cột</h3>
            </div>
            <div class="toolbar">
                <div class="area full">
                    <span class="progress-info"><strong>17</strong> sai trong <strong>40</strong> cột đã map
                    </span><span class="progress-bar" style="width: 760px;"><span class="pb-current"></span>
                    </span>
                </div>
            </div>
            <div class="match-header">
                <div class="help-wrap">
                    <img class="help-img" alt="" src="/images/h1-match-headers.png">
                    <div class="help-action">
                        <p>Bạn đã sẵn sàng bắt đầu map tên cột.</p>
                        <a class="btn btn-getstarted" data-bind="click:GoToMatch">Get Started</a>
                    </div>
                </div>
                <div class="mh-left">
                    <div class="f-view">
                        <strong>Khung nhìn</strong>
                        <label>
                            <input type="radio">
                            Tất cả</label>
                        <label>
                            <input type="radio">
                            Duy nhất không được map</label>
                    </div>
                    <div class="mh-headers">
                        <span class="mh-hdr hdr1">Các cột của bạn</span> <span class="mh-hdr hdr2">Các cột đã map</span>
                    </div>
                    <ul class="mh-yhdrs-list">
                        <li><a class="btn btn-x-light" href="javascript:void(0)">X</a> <span class="lb">Tên trước</span> <span
                            class="i-matched">Tên trước</span> </li>
                        <li class="active"><a class="btn btn-x-light" href="javascript:void(0)">X</a> <span class="lb">Tên sau</span>
                            <span class="i-unmatched"></span></li>
                        <li><a class="btn btn-x-light" href="javascript:void(0)">X</a> <span class="lb">Địa chỉ e-mail</span>
                            <span class="i-unmatched"><span></span></span></li>
                        <li><a class="btn btn-x-light" href="javascript:void(0)">X</a> <span class="lb">Số điện thoại</span> <span
                            class="i-unmatched"></span></li>
                        <li><a class="btn btn-x-light" href="javascript:void(0)">X</a> <span class="lb">Tên sau</span> <span
                            class="i-unmatched"></span></li>
                        <li><a class="btn btn-x-light" href="javascript:void(0)">X</a> <span class="lb">Địa chỉ e-mail</span>
                            <span class="i-unmatched"></span></li>
                        <li><a class="btn btn-x-light" href="javascript:void(0)">X</a> <span class="lb">Địa chỉ e-mail 2</span>
                            <span class="i-unmatched"></span></li>
                        <li><a class="btn btn-x-light" href="javascript:void(0)">X</a> <span class="lb">Địa chỉ e-mail 2</span>
                            <span class="i-unmatched"></span></li>
                    </ul>
                </div>
                <div class="mh-right">
                    <div class="f-search">
                        <input id="searchHeaders" type="text" value="Search Header Names" class="text" />
                        <a class="btn btn-go" href="javascript:void(0)">GO</a> <a href="javascript:void(0)">Xem tất cả cột không map</a>
                    </div>
                    <div class="mh-headers">
                        <span class="mh-hdr hdr1">Tên cột hệ thống</span>
                    </div>
                    <ul class="mh-360hdrs-list">
                        <li>
                            <h3>Thông tin liên hệ</h3>
                            <span class="i-matched">Tên trước</span> <span class="i-matched">Địa chỉ e-mail</span>
                            <span class="i-matched">Địa chỉ e-mail</span> <span class="i-matched">Tên sau</span>
                            <span class="i-matched">Số điện thoại</span> </li>
                        <li>
                            <h3>
                                Thông tin công ty</h3>
                            <span class="i-matched">Tên công ty</span> <span class="i-matched">Địa chỉ công ty</span>
                            <span class="i-matched">Tỉnh thành</span> <span class="i-matched">Số điện thoại công ty</span>
                            <span class="i-matched">Thành phố</span> <span class="i-matched">Mã số công ty</span>
                        </li>
                        <li>
                            <h3>
                                Thông tin liên hệ</h3>
                            <span class="i-matched">Tên trước</span> <span class="i-matched">Địa chỉ e-mail</span>
                            <span class="i-matched">Địa chỉ e-mail</span> <span class="i-matched">Tên sau</span>
                            <span class="i-matched">Số điện thoại</span> </li>
                    </ul>
                </div>
            </div>
        </div>
        <h3 class="centered-wbtn centered-wbtn-bottom save">
            <a class="btn btn-back-light left" href="javascript:void(0)" data-bind="click:GoBackStep1">Back</a> 
            <a class="btn btn-next-gray right" href="javascript:void(0)">Next</a>
            <div class ="clear"></div>
        </h3>        

    </div>
    <!-- //.content -->
      @Html.Partial("Fancybox_Getmapping")
</fieldset>